{% extends 'base.html' %}
{% load staticfiles %}

{% block main %}
    <div class="classes">
        <ul class="classes-items">
                {% for category in categorys %}
                    <li class="items{% if category.id == current_cid %} active {% endif %}"><a href="/category/{{ category.id }}">{{ category.name }}</a></li>
                {% endfor %}
        </ul>
    </div>

    <div class="goods-model">
        <div class="goods-content">

                {% for good in goods %}

                    <div class="good">

                    <a href="/goodsdetails/{{ good.id }}">
                        <img src="{{ MEDIA_URL }}{{ good.getImg }}" width="285px" height="285px">
                        <p class="name">{{ good.name }}</p>
                        <div class="price">
                            <i>￥</i>
                            <p class="big">{{ good.price }}</p>
                            <s>￥{{ good.oldprice }}</s>
                        </div>
                        <div class="sale">
                            特卖
                        </div>
                    </a>
                </div>

                {% endfor %}

        </div>
    </div>

    <div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;">
        {% if pages.has_previous %}

            <a href="/category/{{ current_cid }}/page/{{ pages.previous_page_number }}" style="display: inline-block; padding: 5px; margin: 5px;">上一页</a>

        {% endif %}

        {% if pages.has_next %}

            <a href="/category/{{ current_cid }}/page/{{ pages.next_page_number }}" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>

        {% endif %}

</div>

{% endblock main %}

{% block footerjs %}
     <script>
        $('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})
        $('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})
    </script>
{% endblock footerjs %}